<!--
/**
 * @author xuyh0817
 * @email xuyh0817@foxmail.com
 * @date 2022-03-14 20:09
 * @version 2.0.0
 * @doc todo
 * @website todo
 * @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
 */
 -->
<template>
  <div class="x-render-drag-btn-group" :class="{'x-render-drag-btn-group-active': active }">
    <!-- 复制按钮 -->
    <a-tooltip placement="top" title="复制">
      <a-icon
        type="copy"
        class="x-render-drag-icon"
        @click.stop.prevent="$emit('copy',data)"
      />
    </a-tooltip>
    <!-- 删除按钮 -->
    <a-tooltip placement="top" title="删除">
      <a-icon
        type="delete"
        class="x-render-drag-icon"
        @click.stop.prevent="$emit('remove',data)"
      />
    </a-tooltip>
  </div>
</template>

<script>
export default {
  name: "XRenderDraggableNavbar",
  props: {
    active: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
}
</script>

<style scoped lang="css">
.x-render-drag-btn-group {
  position: absolute;
  top: 5px;
  right: -70px;
  z-index: 10;
  background-color: rgba(64, 158, 255, .9);
  border-bottom-left-radius: 8px;
  display: grid;
  grid-template-columns: repeat(2, 20px);
  column-gap: 8px;
  padding: 3px 8px;
  transition: all .35s;
}

.x-render-drag-btn-group .x-render-drag-icon {
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.x-render-drag-btn-group-active {
  right: 0;
}
</style>
